<template>
  <div class="container">
    <div class="head-container item">
      <div class="title">用户管理</div>
      <el-button-group class="checkout-btn-group">
        <el-button class="checkout-btn" @click="messageDialogVisible=true">
          <i class="el-icon-plus"></i>
          <span>添加用户</span>
        </el-button>
        <el-button class="checkout-btn" @click="queryTableData">
          <i class="el-icon-refresh"></i>
          <span>刷新</span>
        </el-button>
      </el-button-group>
      <div class="search-container">
        <el-input class="query-input"
                  placeholder="请输入姓名"
                  v-model="key"
                  clearable>
        </el-input>
        <el-button class="search-btn" @click="queryTableData">搜索</el-button>
      </div>

    </div>
    <div class="table-container item">
      <el-table
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="username"
            label="账号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="联系电话"
            width="250">
        </el-table-column>
        <el-table-column
            prop="unit"
            label="所在单位"
            width="160">
        </el-table-column>
        <el-table-column
            prop="admin"
            label="是否拥有超级权限"
            width="300">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-popconfirm
                v-if="scope.row.admin==='否'"
                class="option-btn"
                title="确定设置为管理员吗？"
                @confirm="toSuper(scope.row)">
              <el-button type="primary" size="mini" slot="reference">设为管理员</el-button>
            </el-popconfirm>


            <el-popconfirm
                title="确定删除吗？"
                class="option-btn"
                @confirm="delUser(scope.row)">
              <el-button type="danger" size="mini" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="pagination"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="pageSize"
          :page-sizes="[5,10,15]"
          :current-page.sync="pageNum"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog
        title="新建用户"
        :visible.sync="messageDialogVisible">
      <div class="dialog-content">
        <div class="treatment-message content-container">
          <div class="dialog-base-title treatment-message-tittle">用户信息</div>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item>
              <template slot="label">
                账号
              </template>
              <el-input v-model="userMsg.username" minlength="4" maxlength="12" show-word-limit
                        placeholder="4-12位"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                姓名
              </template>
              <el-input v-model="userMsg.name"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                密码
              </template>
              <el-input v-model="userMsg.password" minlength="6" maxlength="16" show-word-limit show-password
                        placeholder="6-16位"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                工作单位及职务
              </template>
              <el-input v-model="userMsg.unit"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                电话号码
              </template>
              <el-input v-model="userMsg.phone" maxlength="11"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                是否为超级管理员
              </template>
              <el-select v-model="userMsg.supermanager" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="messageDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {addUser, deleteUser, queryUsers, toSuper} from "@/api/user";

export default {
  name: "UserManagementPage",
  data() {
    return {
      messageDialogVisible: false,
      tableData: [],
      pageSize: 5,
      pageNum: 1,
      total: 1,
      key: null,
      userMsg: {
        username: "",
        name: "",
        password: "",
        unit: "",
        phone: "",
        supermanager: ""
      },
      options: ["是", "否"]
    }
  },
  methods: {
    add() {

      if (this.userMsg.username === "" || this.userMsg.username.length < 4 || this.userMsg.password === "" || this.userMsg.password.length < 6 || this.userMsg.name === "") {
        this.$message.error("请输入正确的信息");
        return;
      }

      addUser(this.userMsg).then(res => {
        this.$message({
          message: res.message,
          type: "success"
        })
        this.queryTableData();
        this.messageDialogVisible = false;
      }).catch(e => {
        this.$message({
          message: e.message,
          type: "error"
        })
      });
    },
    delUser(row) {
      deleteUser(row.id).then(res => {
        this.queryTableData();
      })
    },
    toSuper(row) {
      toSuper(row.id).then(res => {
        this.queryTableData();
      })
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.queryTableData();
    },
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage;
      this.queryTableData();
    },
    queryTableData() {
      queryUsers(this.pageNum, this.pageSize, this.key).then(res => {
        this.tableData = res.data.list;
        this.tableData.forEach(item => {
          item.admin = item.admin ? "是" : "否";
        });
        this.pageNum = res.data.pageNum;
        this.pageSize = res.data.pageSize;
        this.total = res.data.total;
      })
    },
  },
  mounted() {
    this.queryTableData();
  }
}
</script>

<style scoped>
.container {
  border-top: 3px solid #3c8dbc;
  border-radius: 3px;
  background-color: white;
  margin-left: 20px;
  margin-right: 20px;
}

.item {
  margin-right: 10px;
  margin-left: 10px;
}

.table-container {
  text-align: center;
}

.checkout-btn {
  margin-top: 10px;
  margin-bottom: 10px;
}

.title {
  font-size: 20px;
  padding-top: 10px;
}

.pagination {
  padding-top: 20px;
  padding-bottom: 20px;
}

.search-container {
  display: inline-block;
  float: right;
}

.query-input {
  display: inline-block;
  margin-right: 10px;
  width: 180px;
}

.option-btn {
  margin-left: 10px;
}

.dialog-base-title {
  font-size: 15px;
  padding: 5px;
  display: inline-block;
}

.dialog-base-table {
  width: 100%;
}

.content-container {
  margin-top: 20px;
  background-color: #E9EEF3;
}
</style>
